﻿@page "/tabs"
@page "/docs/guides/components/tabs.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Tabs
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Tabs</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase tabbed interfaces with various configurations including tab positioning, server/client render modes, dynamic tab item modifications, tab wrapping behavior, and conditional tab change prevention with the <code>CanChange</code> event.
</RadzenText>

<RadzenText Anchor="tabs#tabs-position" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Tabs position
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>TabPosition</code> property to position tabs at the top, bottom, left, or right of the content area.
</RadzenText>
<RadzenExample ComponentName="Tabs" Example="TabsPosition">
    <TabsPosition />
</RadzenExample>

<RadzenText Anchor="tabs#server-render-mode" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Server render mode
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Only selected tab content will be rendered.
</RadzenText>
<RadzenExample ComponentName="Tabs" Example="TabsServer">
    <TabsServer />
</RadzenExample>

<RadzenText Anchor="tabs#client-render-mode" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Client render mode
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    All tabs will be rendered initially and tab change will be performed completely using JavaScript
</RadzenText>
<RadzenExample ComponentName="Tabs" Example="TabsClient">
    <TabsClient />
</RadzenExample>


<RadzenText Anchor="tabs#tabs-modify" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    TabItems modify
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Demonstrating modifications to the TabItem collection
</RadzenText>
<RadzenExample ComponentName="Tabs" Example="TabsModify">
    <TabsModify />
</RadzenExample>

<RadzenText Anchor="tabs#tabs-wrap" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Tab items wrap
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Demonstrating wrap of the Tab items
</RadzenText>
<RadzenExample ComponentName="Tabs" Example="TabsWrap">
    <TabsWrap />
</RadzenExample>

<RadzenText Anchor="tabs#prevent-tab-change" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Prevent Tab change
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Demonstrating how to prevent Tab change
</RadzenText>
<RadzenExample ComponentName="Tabs" Example="TabsChange">
    <TabsChange />
</RadzenExample>


<RadzenText Anchor="tabs#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Tabs component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a Tabs component." },
        new KeyboardShortcut { Key = "RightArrow", Action = "Focus next Tab." },
        new KeyboardShortcut { Key = "LeftArrow", Action = "Focus previous Tab." },
        new KeyboardShortcut { Key = "Space or Enter on a focused Tab", Action = "Select the Tab." }
    };
}